<template>
  <div class="complete-container">
    <div class="complete-content">
      <el-result icon="success" title="安装完成" sub-title="恭喜您，系统已成功安装！">
        <template #extra>
          <div class="complete-actions">
            <el-button @click="handleVisitWebsite">访问官网</el-button>
            <el-button type="primary" @click="handleLogin">进入系统</el-button>
          </div>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useInstallStore } from '@/stores/install'

const router = useRouter()
const installStore = useInstallStore()

const systemInfo = reactive({
  name: '诊所管理系统',
  admin_username: 'admin',
  installTime: new Date().toLocaleString()
})

const handleLogin = () => {
  if (installStore.admin_url) {
    window.location.href = installStore.admin_url
  } else {
    router.push('/login')
  }
}

const handleVisitWebsite = () => {
  window.open('http://www.yiliaocrm.com', '_blank')
}
</script>

<style scoped>
.complete-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.complete-content {
  width: 100%;
  max-width: 600px;
}

.complete-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
</style>